<!--
    * Time    : 2021-01-21 13:45:22
    * Author  : zhangTj
    * Desc    : 团队奖励
-->

<template>
    <div class="w750">
        <div class="p-1">
            <div class="position-relative text-fff bg-img rounded-4 font-14 p-2" style="height: 147px">
                <div class="d-flex a-center">
                    <div style="width: 35px; height: 35px">
                        <img v-if="indexData.avatarUrl" :src="$imgUrlHead + indexData.avatarUrl" alt="" class="w-100 h-100 rounded-circle" />
                        <img v-else :src="require('@/assets/images/detailDefault.jpg')" alt="" class="w-100 h-100 rounded-circle" />
                    </div>
                    <span class="ml-1">团队人数：{{ indexData.teamNum }}</span>
                </div>
                <div class="mt-2 grid-column2">
                    <div class="d-flex flex-column">
                        <span class="font-24">{{ Money(indexData.totalActualAwardAmount)[0] }}.{{ Money(indexData.totalActualAwardAmount)[1] }}</span>
                        <span class="opacity-5 font-12 mt">累计获取(佣金)</span>
                    </div>
                    <div class="d-flex flex-column">
                        <span class="font-24">{{ Money(indexData.totalPerformanceAmount)[0] }}.{{ Money(indexData.totalPerformanceAmount)[1] }}</span>
                        <span class="opacity-5 font-12 mt">当前已结算业绩</span>
                    </div>
                </div>
                <div class="position-absolute right-0" style="top: 22px" @click="$toPage('teamRewardExplain')">
                    <div style="padding: 5px 5px 5px 16px; background: rgba(255, 255, 255, 0.25); border-radius: 14px 0px 0px 14px">
                        <div class="font-12 opacity-7">规则说明</div>
                    </div>
                </div>
            </div>
            <div>
                <van-list
                    v-model="paging.loading"
                    :finished="paging.finished"
                    finished-text="没有更多了"
                    @load="loadMore"
                    :immediate-check="false"
                    v-if="!paging.emptylist"
                >
                    <div class="mt-1" v-for="(item, index) in list" :key="index">
                        <div class="bg-fff rounded-4 d-flex flex-column" style="height: 178px; padding: 22px 20px 15px 20px">
                            <div class="d-flex flex-column font-14 border-bottom border-c-f8">
                                <span>本期获取佣金</span>
                                <span class="font-20" style="color: #f56c6c">
                                    +{{ Money(item.actualAwardAmount)[0] }}.{{ Money(item.actualAwardAmount)[1] }}
                                </span>
                                <div class="text-999 font-12 mt mb-15p">
                                    <span>{{ item.cycleStartTime | dateformat('YYYY-MM-DD') }}</span>
                                    <span>~</span>
                                    <span>{{ item.cycleEndTime | dateformat('YYYY-MM-DD') }}</span>
                                </div>
                            </div>
                            <div class="grid-column3 mt-15p flex-1">
                                <div class="font-12 d-flex flex-column j-center">
                                    <span>业绩金额</span>
                                    <span class="text-999 mt">
                                        {{ Number(Money(item.performanceAmount)[0]).toLocaleString() }}.{{ Money(item.performanceAmount)[1] }}
                                    </span>
                                </div>
                                <div class="font-12 d-flex flex-column j-center">
                                    <span>奖励比例</span>
                                    <span class="text-999 mt">{{ item.rewardRatio }}%</span>
                                </div>
                                <div class="font-12 d-flex flex-column j-center">
                                    <span>下级扣减</span>
                                    <span class="text-999 mt">
                                        -{{ Number(Money(item.lowerDeductionAwardAmount)[0]).toLocaleString() }}.{{
                                            Money(item.lowerDeductionAwardAmount)[1]
                                        }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
                <Noempty :pic="require('@/assets/images/review.png')" :title="'暂无相关佣金记录'" v-if="paging.emptylist && !paging.error" />
            </div>
        </div>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import PageUtil from 'utils/PageUtil'
import { awardBillDetail, awardIndex } from '@/api/extensionApi'
import cash from 'utils/tool'

const pageUtil = new PageUtil(awardBillDetail)

export default {
    name: '',
    components: { Noempty },
    data() {
        return {
            paging: {
                tab: false,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            Money: cash, //价格转换
            indexData: {} // 首页数据
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getIndexData()
        pageUtil.loadListByPage(this)
    },
    methods: {
        // 获取首页数据
        getIndexData() {
            awardIndex()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.indexData = res.result
                    sessionStorage.setItem('teamReward', res.result.ruleDescription)
                })
                .catch((err) => {
                })
        },

        // 加载更多
        loadMore() {
            pageUtil.loadListByPageMore()
        }
    }
}
</script>

<style scoped>
.bg-img {
    background: url('~@/assets/images/team-bg.png') no-repeat top left, var(--themescolor);
    background-size: 60%, 100%;
}
</style>
